<template>
	<div>
		<navigationBar navigationTitle="我的订单" />
		<!-- <navigationBar :backType="2" navigationTitle="我的订单" /> -->

		<view class="wrap-order-status flex" :style="'top:' + navigationHeight + 'px;'">
			<block v-for="(item, index) in tab_list" :key="index">
				<view class="status-item flex align-center just-center" @click="onTab(index)">
					<view :class="{ active: item.status === status }">
						{{ item.title }}
					</view>
				</view>
			</block>
		</view>

		<view class="wrap paddingBottom">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item" @click="onDetail(item)">
						<view class="item-one flex align-center just-between">
							<view class="order-num f-26">
								{{ item.order_sn }}
							</view>
							<view class="status f-26">
								{{ item.status_text }}
							</view>
						</view>

						<view class="item-info flex align-center just-between">
							<image class="file" :src="item.goods.service_cover" />

							<view class="info-right">
								<view class="title fb-30 limit-num-line">
									{{ item.goods.service_name }}
								</view>

								<view class="people f-26"> 服务师: {{ item.technician.name }} </view>

								<view class="time f-26"> 预约时间：{{ item.strattime_text }} </view>

								<view class="service-time f-26 flex align-center just-between">
									<text>服务时长：{{ item.time_long }}分钟</text>
									<text class="num f-26">x{{ item.goods.num }}</text>
								</view>
							</view>
						</view>

						<view class="item-bottom flex align-center just-between">
							<view class="total-price">
								<text>总计:</text>
								<text class="price"> ¥{{ item.total_price }} </text>
							</view>

							<view class="btn-bg">
								<orderBtn
									:btnType="'1'"
									:dataInfo="item"
									@onRefresh="onRefresh"
									@onApplyRefund="onApplyRefund"
								/>
							</view>
						</view>
					</view>
				</block>
			</view>

			<uEmpty v-if="list.length === 0" />
		</view>

		<tabBar :current="1" />
	</div>
</template>

<script>
	import { getOrderList } from "@/API/order.js";
	import tabBar from "@/subPages/components/technician/tabBar/tabBar.vue";
	import orderBtn from "@/subPages/components/orderBtnBg/orderBtnBg.vue";
	export default {
		components: {
			tabBar,
			orderBtn,
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,
				tab_list: [
					{ title: "全部订单", status: "0" },
					{ title: "待支付", status: "1" },
					{ title: "待服务", status: "2" },
					{ title: "服务中", status: "6" },
					{ title: "已完成", status: "7" },
				],
				status: "0",
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		onShow() {
			this.onRefresh();
		},
		methods: {
			/**
			 * 切换订单状态
			 */
			onTab(index) {
				this.status = this.tab_list[index].status;
				this.onRefresh();
			},
			/**
			 * 取消订单
			 */
			onCancelOrder(item) {
				this.$filters.onCancelOrder(item, () => {
					this.list.forEach((subItem, index) => {
						if (item.id === subItem.id) {
							this.list[index].status = "-1";
							this.list[index].status_text = "已取消";
						}
					});
				});
			},
			/**
			 * 删除订单
			 */
			onDeleteOrder(item) {
				this.$filters.onDeleteOrder(item, () => {
					this.list.forEach((subItem, index) => {
						if (item.id === subItem.id) {
							this.list.splice(index, 1);
						}
					});
				});
			},
			/**
			 * 详情
			 */
			onDetail(item) {
				uni.navigateTo({
					url: `/subPages/technician/order/orderDetails?order_id=${item.id}`,
				});
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				getOrderList(this.status, this.page).then((res) => {
					const list = res.data.data;
					const total = res.data.total;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			// 申请退款
			onApplyRefund(id) {
				uni.navigateTo({
					url: `/subPages/technician/recruit/refund?order_id=${id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-status {
		position: sticky;
		left: 0;
		width: 100%;
		overflow: hidden;
		height: 100rpx;
		background: white;
		z-index: 10;
		flex-wrap: wrap;

		.status-item {
			flex: 1;
			height: 100rpx;
			overflow: hidden;

			> view {
				display: inline-block;
				height: 100rpx !important;
				line-height: 100rpx;
				box-sizing: border-box;
				border-bottom: 6rpx solid white;
			}

			.active {
				border-color: $theme-color;
			}
		}
	}

	.wrap {
		--limit-num: 1;
		--bottom-height: 120rpx;

		.wrap-list {
			padding: 20rpx;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;

			.item {
				width: 100%;
				background-color: white;
				border-radius: 10rpx;
				overflow: hidden;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.item-one {
					width: 100%;
					height: 86rpx;
					border-bottom: 2rpx solid #ececec;

					.order-num {
						color: $title-color;
					}
					.status {
						color: $theme-color;
					}
				}

				.item-info {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;

					.file {
						width: 176rpx;
						height: 176rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.info-right {
						margin-left: 20rpx;
						flex: 1;
						overflow: hidden;

						.title {
							color: $title-color;
						}
						.people {
							margin-top: 15rpx;
							color: #a3a3a3;
						}
						.time {
							margin-top: 15rpx;
							color: #a3a3a3;
						}
						.service-time {
							margin-top: 15rpx;
							color: #a3a3a3;
						}
						.num {
							color: $title-color;
						}
					}
				}

				.item-bottom {
					margin-top: 30rpx;
					width: 100%;
					height: 90rpx;
					border-top: 2rpx solid #ececec;

					.total-price {
						color: $title-color;
						.price {
							margin-left: 10rpx;
							color: $price-color;
						}
					}

					.btn-bg {
						margin-left: 10rpx;
						flex: 1;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
